Emmet - markup language for expanding CSS rules into HTML

• Элементы: div, p, span, ul, li и любые другие HTML-теги. Просто введите название тега и нажмите Tab.
• Классы: .имя_класса. Например, .container развернется в <div class="container"></div>.
• ID: #идентификатор. Например, #header развернется в <div id="header"></div>.
• Дочерние элементы: родитель > потомок. Например, nav > ul > li развернется в <nav><ul><li></li></ul></nav>.
• Соседние элементы: элемент1 + элемент2. Например, div + p развернется в <div></div><p></p>.
• Подъем на уровень вверх: элемент1 > элемент2 ^ элемент3. Например, div > p > span ^ strong развернется в <div><p><span></span></p><strong></strong></div>.
• Группировка: (элемент1 > элемент2) + элемент3. Например, (div > ul > li*2) + p развернется в <div><ul><li></li><li></li></ul></div><p></p>.
• Умножение: элемент*количество. Например, li*3 развернется в <li></li><li></li><li></li>.
• Нумерация: элемент.item$*3. Развернется в <div class="item1"></div><div class="item2"></div><div class="item3"></div>. Используйте $$ для двузначной нумерации (item01), @- для обратной нумерации (item3, item2, item1), @n- для начала нумерации с n (item3, item4, item5 для @3*3).
• Атрибуты: элемент[атрибут="значение"]. Например, a[href="#"] развернется в <a href=""></a>. Можно указывать несколько атрибутов: input[type="text" name="username"].
• Текст: элемент{текст}. Например, p{Привет, мир!} развернется в <p>Привет, мир!</p>.